<template>
  <q-dialog v-model="doctors.isEditing">
    <q-card class="q-pa-md"
            style="width: 700px; max-width: 80vw">
      <q-item-label class="text-h5">
        {{ 'Редактировать профиль врача' }}
      </q-item-label>
      <q-item style="height: 100%" class="column">
        <q-input v-model="user.full_name"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 100%; border-radius: 4px"
                 label="Имя" />
        <q-input v-model="user.email"
                 :rules="[val => !!val || 'Поле Email обязательно']"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 100%; border-radius: 4px"
                 type="login"
                 label="Email"/>
        <q-input v-model="password"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 100%; border-radius: 4px"
                 type="password"
                 label="Старый пароль"/>
        <q-input v-model="newPassword"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 100%; border-radius: 4px"
                 type="password"
                 label="Новый пароль"/>
        <q-select v-model="main_modality"
                  :options="availableModalities"
                  option-label="name"
                  option-value="id"
                  style="width: 100%; border-radius: 4px"
                  label="Основная специализация"
                  @update:model-value="defineMainModality"/>
        <q-select v-model="additional_modalities"
                  :options="availableModalities"
                  multiple
                  option-label="name"
                  option-value="code"
                  style="width: 100%; border-radius: 4px"
                  label="Доступные доп. специализации" />
        <q-input v-model="rate_percent"
                 :rules="[val => val > 0 && val < 100 || 'Не меньше 0 и не больше 100']"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 100%; border-radius: 4px"
                 type="number"
                 :min="0"
                 :max="100"
                 label="Ставка"/>
        <q-select v-model="preferred_shift"
                  :options="shiftTypes"
                  option-label="label"
                  option-value="value"
                  style="width: 100%; border-radius: 4px"
                  label="Предпочтительные смены" />
        <q-select v-model="preferred_schedule"
                  :options="scheduleTypes"
                  option-label="label"
                  option-value="value"
                  style="width: 100%; border-radius: 4px"
                  label="Предпочтительное расписание" />
        <q-item>
          <q-btn class="q-mt-md"
                 color="primary"
                 style="width: 100%; border-radius: 4px"
                 @click="handleUpdateUser">
            {{ 'Обновить' }}
          </q-btn>
        </q-item>
      </q-item>
    </q-card>
  </q-dialog>
</template>

<script setup>

import {computed, defineComponent, ref, toRaw} from "vue";
import {doctorsStore} from "stores/doctors-store";
import {authStore} from "stores/auth-store";

defineComponent({
  name: 'EditDoctorModal'
});

const shiftTypes = computed(() => doctors.shiftTypes)
const scheduleTypes = computed(() => doctors.scheduleTypes)

const doctors = doctorsStore()
const auth = authStore()

const availableModalities = computed(() => doctors.availableModalities)

const editForm = computed(() => {
  return {
    user: toRaw(user.value),
    password: toRaw(password.value),
    newPassword: toRaw(newPassword.value),
    main_modality: toRaw(main_modality.value),
    preferred_schedule: toRaw(preferred_schedule.value),
    preferred_shift: toRaw(preferred_shift.value),
    rate_percent: toRaw(rate_percent.value),
    additional_modalities: toRaw(additional_modalities.value)
  }
})

const user = computed({
  get() {
    return doctors.editableDoctor.user
  },
  set(newValue) {
    doctors.editableDoctor.user = newValue
  }
})

const password = ref('')
const newPassword = ref('')

const main_modality = computed({
  get() {
    return doctors.editableDoctor.main_modality
  },
  set(newValue) {
    doctors.editableDoctor.main_modality = newValue
  }
})

const preferred_schedule = computed({
  get() {
    return doctors.editableDoctor.preferred_schedule
  },
  set(newValue) {
    doctors.editableDoctor.preferred_schedule = newValue
  }
})

const preferred_shift = computed({
  get() {
    return doctors.editableDoctor.preferred_shift
  },
  set(newValue) {
    doctors.editableDoctor.preferred_shift = newValue
  }
})

const rate_percent = computed({
  get() {
    return doctors.editableDoctor.rate_percent
  },
  set(newValue) {
    doctors.editableDoctor.rate_percent = newValue
  }
})

const additional_modalities = computed({
  get() {
    return doctors.editableDoctor.additional_modalities
  },
  set(newValue) {
    doctors.editableDoctor.additional_modalities = newValue
  }
})

const defineMainModality = () => {
  doctors.editableDoctor.additional_modalities= additional_modalities.value.filter((el) => el.code !== main_modality.value?.code)
}

const handleUpdateUser = async () => {
  try {
    await doctors.updateDoctor({
      id: doctors.editableDoctor.user.id,
      ...editForm.value
    })
  } catch (err) {
    console.error(err)
  }
}

</script>


<style scoped lang="scss">

</style>
